<template>
  <div class="notify">
    <van-overlay :show="showOverlay" :lock-scroll="true" v-if="showOverlay">
      <NotifyContent @notifyClose="closeNotify" />
    </van-overlay>
    <van-dialog
      v-if="showDialog"
      v-model:show="showDialog"
      :show-confirm-button="false"
      @close="closeNotify"
      @cancel="closeNotify"
      :closeOnClickOverlay="true"
    >
      <NotifyContent @notifyClose="closeNotify" />
    </van-dialog>
  </div>
</template>
<script setup name="notify">
// import { closeNotify } from "vant";NotifyContent
import NotifyContent from "./NotifyContent.vue";
import {
  ref,
  onMounted,
  onActivated,
  onBeforeUnmount,
  watch,
  computed
} from "vue";
import {
  msgList1,
  msgDetail,
  msgRead,
  msgRemove,
  msgReadAll
} from "../../api/msg";
import { dateTimeZone } from "../../utils/date";
import { mainAct } from "@/store/activeda";
import typeActive from "../../assets/imgs/notify-active.png";
import typeDeposit from "../../assets/imgs/notify-ch.png";
import typeDefault from "../../assets/imgs/notify-type.png";
import typeVip from "../../assets/imgs/notify-vip.png";
import typeWithdrawal from "../../assets/imgs/notify-wh.png";
const main = mainAct();
const loading = ref(true);
const props = defineProps({
  notifyShow: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(["notifyClose"]);
const isStep1 = ref(true);
const notifyList = ref([]);
const details = ref({
  name: "",
  time: "",
  tiele: "",
  con: ""
});
//分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const showOverlay = ref(props.notifyShow);
const showDialog = ref(false);
watch(
  () => props.notifyShow,
  val => {
    showOverlay.value = val;
  }
);

//点击消息
const goShow = () => {
  if (!main.isPhoneModel) {
    showOverlay.value = true;
  } else {
    showDialog.value = true;
  }
};

defineExpose({
  goShow
});

const backToStep1 = () => {
  isStep1.value = true;
  notifyList.value = [];
  getMsgList();
};
const closeNotify = () => {
  showOverlay.value = false;
  showDialog.value = false;
  emit("notifyClose");
};
const unread_num = ref();
//接口-------已读消息
const readMsg = async id => {
  let data = {
    id
  };
  let res = await msgRead(data);
  if (res.errno == 0) {
    // notifyList.value.forEach(item => {
    //   if ((item.id = id)) {
    //     item.status = 2;
    //   }
    // });
  }
  console.log(res);
};
//接口-------全部已读
const readAll = async () => {
  let res = await msgReadAll();
  console.log(res);
  if (res.errno == 0) {
    //清空
    notifyList.value = [];
    //请求
    getMsgList();
  }
};

//接口-------获取消息列表
const getMsgList = async () => {
  let params = {
    page: currentPage.value,
    page_size: pageSize.value
  };
  let res = await msgList1(params);
  // console.log("接口列表", res);
  if (res?.errno == 0) {
    loading.value = false;
    res.data.list.forEach(item => {
      item.created_at = dateTimeZone(
        item.created_at,
        "{y}-{m}-{d} {h}:{i}:{s}",
        main.timeZone
      );
    });
    notifyList.value.push(...res.data.list);
    // console.log(notifyList.value.length);
    // console.log(notifyList.value);

    // details.value = notifyList[0]; //默认显示第一条
    currentPage.value = res.data.page; //当前页
    pageSize.value = res.data.page_size; //总页数
    total.value = res.data.total; //总页数
    unread_num.value = res.data.unread_num; //未读数
  }
};
const bottom = ref(false);
const scrolling = async e => {
  const clientHeight = e.target.clientHeight;
  const scrollHeight = e.target.scrollHeight;
  const scrollTop = e.target.scrollTop;
  // console.log(clientHeight, scrollHeight, scrollTop);

  if (scrollTop + clientHeight >= scrollHeight) {
    console.log("到底了!");
    // console.log(notifyList.value.length);
    // console.log(total.value);.
    if (notifyList.value.length < total.value) {
      // loading.value = true;
      //数据未加载完，继续赋值
      currentPage.value++;
      getMsgList();
    }

    bottom.value = true;
  } else {
    bottom.value = false;
  }
};
onMounted(() => {
  // console.log("notify");
  if (main.isLogin) {
    getMsgList();
  }
});
watch(
  () => main.isLogin,
  () => {
    // console.log("消息监听登录状态", main.isLogin);
    if (main.isLogin) {
      getMsgList();
    }
  }
);

onBeforeUnmount(() => {});
</script>
<style scoped lang="less">
.van-overlay {
  top: 60px;
  max-height: 70%;
  background-color: #0f212e;
  z-index: 11 !important;
}

::v-deep(.van-dialog) {
  width: 99%;
  padding: 16px 10px;
  background-color: #0f212e !important;
}

@media (min-width: 600px) {
  .van-overlay {
    width: 375px;
    height: auto;
    max-height: 400px !important;
    overflow-y: auto;
    right: 45px;
    top: calc(60px + 0.5rem);
    left: unset;
    border-radius: 0.5rem;
    z-index: 11 !important;
  }

  .backIcon {
    display: none !important;
  }

  .backIcon2 {
    display: block !important;
  }

  .list-box {
    max-height: 300px !important;
    overflow-y: auto;
    padding-right: 10px;
  }
}

.notify {
  /*width: 100%;*/
  /* width: 375px;*/
  /*height: 100%;*/
  background-color: #0f212e;
  color: #b1bad3;
  position: relative;
}

.backIcon {
  display: block;
}

.list-box {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  padding-right: 10px;
}

.backIcon2 {
  display: none;
}
</style>
